<template>
	<view>
		<!-- #ifdef H5 -->
		<YouRan-UI-WeiXinNei-TiShi></YouRan-UI-WeiXinNei-TiShi>
		<!-- #endif -->
		<view class="YouRan-UI-LieBiao-2">
			<template v-if="HuaTi_LieBiao_ZhuangTai=='YouShuJu'">
				<view
					@click="$_TiaoZhuan('_XiangQing_TieZi/_XiangQing_TieZi?pid='+item.pid)"
					class="XunHuan" v-for="item in HuaTi_LieBiao">
					<!-- 块.1 - 用户展示 -->
					<view
						class="YouRan-UI-YongHu-1 Flex"
						@click.stop="$_TiaoZhuan('_XiangQing_YongHu/_XiangQing_YongHu?uid=' + item.creator.uid)">
						<view class="Zuo">
							<view class="TouXiang">
								<image :src="item.creator.avatar" mode="widthFix"></image>
							</view>
							<view class="YouXia Bj-LanSe" v-if="item.creator.roleName=='普通会员'">普</view>
							<view class="YouXia Bj-HongSe" v-if="item.creator.roleName=='管理员'">管</view>
						</view>
						<view class="Zhong">
							<view class="Zhong-Shang">
								<view class="NiCheng H2">{{item.creator.nickname}}</view>
							</view>
							<view class="Zhong-Xia Flex">
								<text class="P">{{item.creator.roleName}}</text>
								<text class="P">{{item.createTimeFormat}}</text>
							</view>
						</view>
						<view class="You Flex">
							<view class="AnNiu Flex">
								<text class="iconfont icon-add"></text>
								<text class="P">关注</text>
							</view>
						</view>
					</view>
					<view
						class="BiaoTi"
						v-if="item.title">{{item.title}}</view>
					<!-- 文字摘要 -->
					<view
						class="ZhaiYao H2">{{$_GuoLv_HTML(item.content)}}</view>
					<!-- 图片列表 -->
					<view
						class="TuPian Flex" v-if="item.fileCount.images">
						<view
							v-for="(item_Tu,index) in item.files.images">
							<image :src="item_Tu.imageSquareUrl" mode="widthFix"></image>
						</view>
					</view>
					<!-- 视频列表 -->
					<view class="ShiPin" v-if="!item.fileCount.images && item.fileCount.videos">
						<view class="_FengMian">
							<image :src="item.files.videos[0].videoPosterUrl" mode="widthFix"></image>
						</view>
						<text class="Flex iconfont icon-play"></text>
					</view>
					<!-- 评论列表 -->
					<view
						class="PingLun Flex"
						v-if="item.previewComments">
						<view class="_TouXiang">
							<image :src="item.previewComments[0].creator.avatar" mode="widthFix"></image>
						</view>
						<view class="_NiCheng">{{item.previewComments[0].creator.nickname}}:</view>
						<view class="_NeiRong YiHang">{{$_GuoLv_HTML(item.previewComments[0].content)}}</view>
					</view>
					<!-- 帖子类型 -->
					<view class="LeiXing Flex">
						<text class="Bj-LanSe iconfont icon-tupian" v-if="item.fileCount.images"></text>
						<text class="Bj-HongSe iconfont icon-zhibo" v-if="item.fileCount.videos"></text>
						<text class="Bj-LvSe iconfont icon-yuyin" v-if="item.fileCount.audios"></text>
					</view>
					<!-- 尾部图标 -->
					<view class="TuBiao Flex">
						<view class="Flex">
							<text class="iconfont icon-comment"></text>
							<text class="Zi">{{item.commentCount}}</text>
						</view>
						<view class="Flex">
							<text class="iconfont icon-good"></text>
							<text class="Zi">{{item.likeCount}}</text>
						</view>
						<view class="Flex">
							<text class="iconfont icon-favorite"></text>
							<text class="Zi">{{item.followCount}}</text>
						</view>
					</view>
				</view>
				<view
					@click="QingQiu_HuaTi_LieBiao('FanYe')"
					class="H3 H3-Line Bj-BeiJingSe Zt-ZhanWeiSe Flex"
					style="padding: 35rpx 0;text-align: center;margin: 25rpx;justify-content: center;border-radius: 100rpx;">点击加载更多</view>
			</template>
			<template v-if="HuaTi_LieBiao_ZhuangTai=='JiaZaiZhong'">
				<YouRan-UI-JiaZaiZhong LeiXing="QuanPing"></YouRan-UI-JiaZaiZhong>
			</template>
			<template v-if="HuaTi_LieBiao_ZhuangTai=='WuShuJu'">
				<view class="YouRan-UI-WuShuJu-1 Flex" style="padding: 50rpx 0;">
					<text class="iconfont icon-cry Zt-ZhanWeiSe"></text>
					<view class="Zt-ZhanWeiSe">暂无任何数据</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				HuaTi_LieBiao:[],
				HuaTi_LieBiao_ZhuangTai:"JiaZaiZhong",
				HuaTi_LieBiao_YeMa:2
			}
		},
		onLoad(e) {
			this.Hid = e.hid;
			this.QingQiu_HuaTi_XiangQing()
		},
		methods: {
			QingQiu_HuaTi_XiangQing(){
				this.$_QingQiu(
					"GET","/api/v2/hashtag/"+this.Hid+"/detail",{},
					(res) => {
						uni.setNavigationBarTitle({ title:res.data.data.detail.hname })
						this.QingQiu_HuaTi_LieBiao();
					}
				)
			},
			QingQiu_HuaTi_LieBiao(e){
				let FanYe = e;
				if(FanYe){uni.showLoading({ title: "加载中" });}
				this.$_QingQiu(
					"GET","/api/v2/post/list?hid="+this.Hid,
					{
						"whitelistKeys":"pid,creator.uid,creator.avatar,creator.nickname,creator.roleName,createTimeFormat,title,content,fileCount,files,commentCount,likeCount,followCount,previewComments.0.creator.avatar,previewComments.0.creator.nickname,previewComments.0.content",
						"page":FanYe ? this.HuaTi_LieBiao_YeMa : ""
					},
					(res) => {
						if(FanYe){
							if(res.data.data.list.length){
								this.HuaTi_LieBiao = this.HuaTi_LieBiao.concat(res.data.data.list);
								this.HuaTi_LieBiao_YeMa++
								uni.hideLoading();
							}else{
								uni.showToast({
									title: "没有数据啦",
									icon: "none",
									duration: 1000
								});
							}
						}else{
							this.HuaTi_LieBiao = res.data.data.list;
							if(this.HuaTi_LieBiao.length){
								this.HuaTi_LieBiao_ZhuangTai = "YouShuJu"
							}else{
								this.HuaTi_LieBiao_ZhuangTai = "WuShuJu"
							}
						}
					}
				)
			}
		}
	}
</script>

<style>

</style>
